Internetservice - Blog

bit4you präsentiert einen Blog rund um die Themen TYPO3, MySQL und PHP

Dynamische Menüs mit CSS und Javascript

BeitragVerfasst am: 13.12.2007, 09:49 Titel: Dynamische Menüs mit CSS und Javascript Antworten mit Zitat
I) JAVASCRIPT nav.js
====================

Code:
sfHover = function() {
var sfEls = document.getElementById(”hauptnav”).getElementsByTagName(”LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}if (window.attachEvent) window.attachEvent(”onload”, sfHover);

II) TYPOSCRIPT
===========
1) Javascript und CSS-Stylesheets einbinden
———————————————————

Code:
page.headerData.10000 = TEXT
page.headerData.10000.value (
<script type=”text/javascript” language=”JavaScript” src=”fileadmin/js/nav.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style.css” media=”screen” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/ie-style.css” media=”screen” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style-print.css” media=”print” />
)


Zitat:
MS Internet Explorer, bedingte Kommentare siehe hier:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

2) Das Menü aufbauen
———————————————————

Code:
lib.MainNav = HMENU
lib.MainNav {
wrap = <ul id=”hauptnav”>|</ul>
#wrap = <ul>|</ul>
special = directory
special.value = 21 = TMENU
1.expAll = 1
1.NO = 1
1.NO.ATagParams = class=”navilink”
1.NO.wrapItemAndSub = <li>|</li>1.ACT = 2
1.ACT.ATagParams = class=”navilink”
1.ACT.wrapItemAndSub = <li class=”active”>|</li>
1.ACT.wrapItemAndSub = <li>|</li>
1.ACT.expAll = 1

2 < .1
2.wrap = <ul>|</ul>
2.ACT.wrapItemAndSub = <li class=”active”>|</li>
2.ACT.wrapItemAndSub = <li>|</li>

# 2. Ebene: falls Einträge auf dritter Ebene vorhanden
# den Linktext mit Pfeilspize markieren
2.IFSUB = 1
2.IFSUB.ATagParams = class=”navilink”
2.IFSUB.stdWrap.wrap = | >
2.IFSUB.wrapItemAndSub = <li>|</li>

# 2. Ebene, aktiver Zustand: falls Einträge auf dritter Ebene vorhanden
# den Linktext mit Pfeilspize markieren
2.ACTIFSUB = 1
2.ACTIFSUB.ATagParams = class=”navilink”
2.ACTIFSUB.stdWrap.wrap = | >
2.ACTIFSUB.wrapItemAndSub = <li>|</li>

3 < .2
3.wrap = <ul>|</ul>
3.ACT.wrapItemAndSub = <li class=”active”>|</li>
3.ACT.wrapItemAndSub = <li>|</li>

}

III) CSS
======
A) Hauptstylesheet style.css
——————————————–
wirkt für alle Browser, sofern die Definitionen nicht im Spezialstyleheet (siehe III B) für Internet Explorer überschrieben werden.

Hinweis: die richtige Reihenfolge der CSS-Definitionen ist wichtig

Code:
/* = = = = = = = = = = ALLGEMEINE DEFINITIONEN S T A R T = = = = = = = = = = */
a:link, a:visited, a:hover {
text-decoration : none;
}/* = = = = = = = = = = ALLGEMEINE DEFINITIONEN E N D E = = = = = = = = = = */

Code:
/* = = = = = = = = NAVIGATION ANFANG = = = = = = = = */


Den DIV- Container formatieren, der das Menü enthält

Code:
.navi {
background: url(/fileadmin/templates/images/menubg.gif) repeat-x;
width: 932px;
border-left: 2px solid white;
border-bottom: 2px solid white;
height: 30px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-transform: uppercase;
}


Grundlegende Einstellungen für die waagrechte Hauptmenüzeile
height := Höhe Hauptmenüzeile

Code:
#hauptnav, #hauptnav ul {
padding: 0;
margin: 0;
list-style: none;
height: 30px;
font-size: 10px;
}#hauptnav li:hover a, #hauptnav li.active a, #hauptnav li.sfhover a {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
}#hauptnav li {
float: left;
margin: 0;
padding: 0;
}


submenus ab Ebene1 ausblenden
border-top := Abstand und Rand oben, der einzelnen Einträge
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2
margin 30px . . . := unter das waagrechte Menü mit Höhe 30 Pixel setzen
margin . . . -1px := Positionskorrektur

Code:
#hauptnav li ul {
clear: both;
position: absolute;
width: 155px;
left: -999em;
margin: 30px 0 0 -1px;
padding: 0;
border-top: 2px solid #fff;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0px 0 2px 0;
}


submenus ab Ebene1 einblenden
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2

Code:
#hauptnav li:hover ul, #hauptnav li.sfhover ul {
left: auto;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
}


wenn submenu Ebene1 eingeblendet dann untergeordnete Ebenen ausblenden

Code:
#hauptnav li:hover ul li ul, #hauptnav li.sfhover ul li ul {
position: absolute;
width: 155px;
left: -999em;
margin: -1px 0 0 -1px;
padding: 0;
border-top: 1px solid #fff;
}


wenn submenu Ebene1 eingeblendet dann untergeordnete Ebene des aktiven Eintrags einblenden
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2

Code:
#hauptnav li ul li:hover ul, #hauptnav li ul li.sfhover ul {
left: 151px;
top: auto;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
}


Abstände Menüs auf 3. Ebene
margin-left := angepasst an Breite Ebene 2
margin-top := vertikale Positionskorrektur

Code:
#hauptnav li ul li ul {
margin-top: 5px;
margin-left: 144px;
}


Hintergrundfarbe hovernder Link in Untermenüs hier einstellen
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2

Code:
#hauptnav li:hover ul li a:hover, #hauptnav li.sfhover ul li a:hover {
background: #678BBF;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
}


Formatierung horizontale Menuehauptzeile
border-right := horizontale Abstände der einzelnen Einträge

Code:
#hauptnav li a.navilink:link, #hauptnav li a.navilink:visited {
display : inline;
color: white;
font-size: 12px;
border-right: 2px solid white;
height: 22px;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}#hauptnav li a.navilink:hover {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
display : inline;
color: white;
font-size: 12px;
border-right: 2px solid white;
height: 22px;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}#hauptnav li a.navilinkaktiv:link, #hauptnav li a.navilinkaktiv:visited, #hauptnav li a.navilinkaktiv:hover {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
display : inline;
color: white;
height: 22px;
font-size: 12px;
border-right: 2px solid white;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}
/* ENDE Formatierung horizontale Menuehauptzeile */


Submenuetexte Schriftformattierung

Code:
#hauptnav li ul li a.navilink:link, #hauptnav li ul li a.navilink:visited, #hauptnav li ul li a.navilink:hover,
#hauptnav li ul li a.navilinkaktiv:link, #hauptnav li ul li a.navilinkaktiv:visited, #hauptnav li ul li a.navilinkaktiv:hover {
padding: 0 0 2px 12px;
font-size: 11px;
font-weight: normal;
text-transform: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
height: 14px;
width: 137px;
}


Hintergrundfarbe Menüeintrag 2. Ebene falls Mauszeiger in untergeordnetem Menü auf 3. Ebene unterwegs ist.

Code:
#hauptnav li ul li:hover a, #hauptnav li ul li.sfhover a {
background: #678BBF;
}


Hintergrundfarbe Menüs

Code:
#hauptnav li ul li:hover ul li a, #hauptnav li ul li.sfhover ul li a {
background: #8cb2dd;
}

Code:
/* = = = = = = = = NAVIGATION ENDE = = = = = = = = */

III) CSS
======
A) Spezialstylesheet ie-style.css
——————————————–
Ãœberschreibt Einstellungen aus dem Hauptstylesheet um Unterschiede, die aus der unterschiedlichen Handhabung des Boxmodels bei MS IE Browsern resultieren, zu kompensieren

Code:
#hauptnav li ul {
margin: 0px 0 0 -1px;
font-size: 11px;
}
#hauptnav li ul li:hover ul, #hauptnav li ul li.sfhover ul {
margin: -18px 0 0 0;
left: 150px;
font-size: 11px;
}
* html #hauptnav li ul li:hover ul, * html #hauptnav li ul li.sfhover ul {
margin: -19px 0 0 0;
}

IV) HTML index.html
================
1) Javascript und CSS- Stylesheet im Seitenkopf einbinden

Code:
<script type=”text/javascript” language=”JavaScript” src=”fileadmin/js/nav.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style.css” media=”screen” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/ie-style.css” media=”screen” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style-print.css” media=”print” />


Zitat:
MS Internet Explorer, bedingte Kommentare siehe hier:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

2) Menücode im body

Code:
<div class=”navi”>
<ul id=”hauptnav”>
<li><a href=”index.php?id=8″ onfocus=”blurLink(this);” class=”navilink”>Technische Dokumentation</a>
<ul>
<li><a href=”index.php?id=22″ onfocus=”blurLink(this);” class=”navilink”>Redaktion ></a>
<ul>
<li><a href=”index.php?id=30″ onfocus=”blurLink(this);” class=”navilink”>SPEC 1000D</a></li>
<li><a href=”index.php?id=29″ onfocus=”blurLink(this);” class=”navilink”>Online-Dokumentation</a></li>
<li><a href=”index.php?id=28″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=21″ onfocus=”blurLink(this);” class=”navilink”>Ersatzteilkataloge ></a>
<ul>
<li><a href=”index.php?id=32″ onfocus=”blurLink(this);” class=”navilink”>B007</a></li>
<li><a href=”index.php?id=31″ onfocus=”blurLink(this);” class=”navilink”>SPEC 2000M</a></li>
</ul></li>
<li><a href=”index.php?id=20″ onfocus=”blurLink(this);” class=”navilink”>Grafik / Design</a></li>
<li><a href=”index.php?id=19″ onfocus=”blurLink(this);” class=”navilink”>Multimedia</a></li>
<li><a href=”index.php?id=18″ onfocus=”blurLink(this);” class=”navilink”>Qualitätssicherung</a></li>
<li><a href=”index.php?id=17″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=7″ onfocus=”blurLink(this);” class=”navilink”>Schulung</a>
<ul>
<li><a href=”index.php?id=26″ onfocus=”blurLink(this);” class=”navilink”>CBT / CUA</a></li>
<li><a href=”index.php?id=25″ onfocus=”blurLink(this);” class=”navilink”>DUH</a></li>
<li><a href=”index.php?id=24″ onfocus=”blurLink(this);” class=”navilink”>klassisch</a></li>
<li><a href=”index.php?id=23″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=6″ onfocus=”blurLink(this);” class=”navilink”>Logistische Analysen</a></li>
<li><a href=”index.php?id=5″ onfocus=”blurLink(this);” class=”navilink”>Software-Entwicklung</a></li>
</ul>
</div>

Dieser Beitrag wurde geschrieben am Donnerstag, 13. Dezember 2007 und wurde abgelegt unter "TYPO3 Content". Du kannst die Kommentare verfolgen mit RSS 2.0. Kommentare sind zur Zeit geschlossen, aber du kannst einen Trackback senden von deiner eigenen Seite.

Kommentare sind zur Zeit geschlossen.

Internetservice - Blog läuft unter Wordpress 2.3.2
 Anpassung und Design: bit4you :: Waldseer Str. 14 :: 88250 Weingarten